<template>
  <div class="info">
    <div class="h-40px box line-height-40px m-b-5px">{{ $t('home.order.orderNum') }}: <span class="color-#999999">888</span></div>
    <div class="main">
      <el-scrollbar>
        <div class="box flex h-66px items-center">
          <div class="font-bold name">{{ $t('home.order.pname') }}</div>
          <div class="spe">{{ $t('home.order.spe') }}</div>
          <div class="count">{{ $t('home.order.count') }}</div>
        </div>

        <div
          class="box flex items-center m-t-3px"
          :class="{ active: item.id == ostore.currOrderId }"
          v-for="item in ostore.orders"
          :key="item.id"
          @click="handleProduct(item)"
        >
          <div class="name">
            <p>{{ showName(item) }}</p>
            <p>{{ showSugar(item.sugar!) }}/{{ showCold(item.cold!) }}</p>
          </div>
          <div class="spe">{{ item.size }}</div>
          <div class="count">
            <p>x {{ item.amount }}</p>
            <p class="color-#D50000">{{ (item.price! * item.amount).toFixed(0) }}</p>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="m-t-5px">
      <div class="box fxs h-50px">
        <div>{{ $t('home.order.totalCount') }}: {{ totalCount }}</div>
        <div>
          {{ $t('home.order.total') }}: <span class="color-#D50000">{{ total }}</span>
        </div>
      </div>
      <div class="m-t-10px flex">
        <div class="button pay m-r-10px" @click="cash">{{ $t('home.order.cash') }}</div>
        <div class="button pay" @click="online">{{ $t('home.order.scan') }}</div>
      </div>
      <div class="m-t-10px flex">
        <div class="button pay m-r-10px" @click="pay(10)">{{ $t('home.order.take1') }}</div>
        <div class="button pay" @click="pay(11)">{{ $t('home.order.take2') }}</div>
      </div>
    </div>
  </div>

  <el-dialog v-model="dialogCashVisible" :title="$t('common.tip')" width="500" :close-on-click-modal="false" :z-index="100">
    <div>
      <div class="font-size-16px">
        <div>{{ $t('home.order.cashP') }} {{ total }}</div>
        <div class="m-y14px">{{ $t('home.order.cashR') }} {{ input }}</div>
        <div>{{ $t('home.order.cashE') }} {{ change }}</div>
      </div>
      <div class="flex m-t14px">
        <div class="ni">
          <div @click="ni('1')">1</div>
          <div @click="ni('2')">2</div>
          <div @click="ni('3')">3</div>
          <div @click="ni('4')">4</div>
          <div @click="ni('5')">5</div>
          <div @click="ni('6')">6</div>
          <div @click="ni('7')">7</div>
          <div @click="ni('8')">8</div>
          <div @click="ni('9')">9</div>
          <div @click="ni('00')">00</div>
          <div @click="ni('0')">0</div>
          <div @click="ni('.')">.</div>
        </div>
        <div class="submit">
          <div @click="clean">{{ $t('common.clean') }}</div>
          <div class="sure" @click="order(0)">{{ $t('common.sure') }}</div>
        </div>
      </div>
    </div>
  </el-dialog>

  <el-dialog v-model="dialogOnlineVisible" :title="$t('common.tip')" width="500" :close-on-click-modal="false" :z-index="100">
    <div class="large">
      <el-radio-group v-model="onlinePayWay">
        <el-radio :value="50" size="large" border>Terminal</el-radio>
        <el-radio :value="51" size="large" border>Payme</el-radio>
        <el-radio :value="52" size="large" border>Uzum</el-radio>
        <el-radio :value="53" size="large" border>Click</el-radio>
        <el-radio :value="54" size="large" border>Alif</el-radio>
        <el-radio :value="55" size="large" border>Card</el-radio>
      </el-radio-group>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogOnlineVisible = false">{{ $t('common.cancel') }}</el-button>
        <el-button type="primary" @click="submitOnline">{{ $t('common.sure') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
// import { ElMessageBox } from 'element-plus'
const { t } = useI18n()

const ostore = useOrderStore()
const store = useAppStore()

const dialogCashVisible = ref(false)
const dialogOnlineVisible = ref(false)
const input = ref(0)

const payWay = ref(0)

// 支付方式，0现金，1扫码，2充值，10外卖1，11外卖2
// 50 Terminal，51 payme，52 Uzum，53 Click，54 Alif，55 Card.
const onlinePayWay = ref()

function handleProduct(item: ApiOrderProductInfo) {
  ostore.currOrderId = item.id
}

const totalCount = computed(() => {
  let i = 0
  ostore.orders.forEach(o => (i += o.amount))
  return i
})

const total = computed(() => {
  let i = 0
  ostore.orders.forEach(o => (i += (o.price || 0) * o.amount))
  return i.toFixed(0)
})

const change = computed(() => {
  let i = 0
  ostore.orders.forEach(o => (i += (o.price || 0) * o.amount))
  return input.value - i
})

function cash() {
  if (ostore.orders != null && ostore.orders.length > 0) {
    dialogCashVisible.value = true
  }
}

function online() {
  if (ostore.orders != null && ostore.orders.length > 0) {
    onlinePayWay.value = null
    dialogOnlineVisible.value = true
  }
}

function submitOnline() {
  order(onlinePayWay.value)
  dialogOnlineVisible.value = false
}

function pay(type: number) {
  payWay.value = type
  ElMessageBox.confirm(t('home.order.confirm'), t('common.tip'), {
    confirmButtonText: t('common.sure'),
    cancelButtonText: t('common.cancel'),
    type: 'info',
    buttonSize: 'large'
  })
    .then(() => {
      order(payWay.value)
    })
    .catch(() => {})
}

function order(type: number) {
  const order = {} as ApiOrders
  order.productInfo = ostore.orders
  order.payWay = type
  order.payed = true
  order.shopId = cache.getShop().id

  store.setGlobalLoading(true, t('common.print'))
  apis.api
    .employeeOrderProduct(order)
    .then(() => {
      ostore.cleanOrders()
      input.value = 0
      dialogCashVisible.value = false
      ElMessage.success(t('common.printOK'))
    })
    .finally(() => store.cleanGlobalLoading())
}

function ni(n: string) {
  let num = input.value + ''
  if (n !== '.') {
    num = input.value + n
  }

  input.value = parseInt(num)
}

function clean() {
  input.value = 0
}
</script>

<style lang="scss" scoped>
.info {
  height: calc(100vh - 50px);
  display: flex;
  flex-direction: column;
  .active {
    background: #3aa1a2 !important;
    color: #fff;
  }
}
.box {
  background-color: #fff;
  border-radius: 6px 6px 6px 6px;
  color: #333333;
  padding: 0 16px;
}
.button {
  cursor: pointer;
  background-color: #fff;
  &:active {
    background-color: #dcdcdc;
  }
}
.main {
  height: calc(100vh - 280px);
}
.name {
  flex: 0 0 140px;
}
.spe {
  flex: 0 0 38px;
}
.count {
  text-align: right;
  flex: 0 0 80px;
}
.name,
.count {
  p {
    margin: 0;
    padding-top: 4px;
    &:last-child {
      padding-bottom: 4px;
    }
  }
}
.pay {
  background-color: #fff;
  border-radius: 6px;
  line-height: 50px;
  height: 50px;
  text-align: center;
  width: 142px;
}
.ni {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 330px;
}
.ni,
.submit {
  div {
    cursor: pointer;
    border-radius: 4px;
    background-color: #f6f6f6;
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin: 0 10px 10px 0;
    &:active {
      background-color: #3aa1a2;
      color: #fff;
    }
  }
}
.submit {
  .sure {
    line-height: 100px;
    height: 100px !important;
  }
}
.large {
  :deep(.ep-radio) {
    margin-bottom: 20px;
  }
}
</style>
